<div class="d-flex align-items-center justify-content-between">
  <h4 mat-dialog-title class="mb-2">
    {{
    (this.data.isEdit ? 'multiCluster.edit.title' : 'multiCluster.promotion.title')
      | translate
    }}
  </h4>
  <button (click)="onCancel()" class="mb-2" aria-label="Close dialog" mat-icon-button>
    <i class="eos-icons ">close</i>
  </button>
</div>
<hr class="fancy" />

  <div>
    <div mat-dialog-content class="dialog-content p0 m0" style="height:285px;">
      <form
        #clusterForm="ngForm"
        fxLayout="column"
        fxLayoutAlign="start"
        fxFlex="1 0 auto"
        class="pt-lg"
      >
        <div
          fxLayout="row"
          fxLayoutAlign="start center"
          fxFlex="1 0 auto"
          class="pl-4 mt-sm-3"
        >
          <mat-form-field appearance="outline" fxFlex="100" class="pr-4">
            <mat-label>{{ "multiCluster.promotion.name" | translate }}</mat-label>
            <input
              matInput
              [(ngModel)]="cluster.name"
              name="name"
              required
            />
            <mat-error></mat-error>
          </mat-form-field>
        </div>
        <div
          fxLayout="row"
          fxLayoutAlign="start center"
          fxFlex="1 0 auto"
          class="pl-4"
        >
          <mat-form-field appearance="outline" fxFlex="50" class="pr-4">
            <mat-label>{{ "multiCluster.promotion.server" | translate }}</mat-label>
            <input
              matInput
              [(ngModel)]="cluster.host"
              name="ip"
              required
              pattern="^([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])(\.([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\-]{0,61}[a-zA-Z0-9]))*$"
            />
            <mat-error></mat-error>
          </mat-form-field>
          <mat-form-field appearance="outline" fxFlex="50" class="pr-4">
            <mat-label>{{ "multiCluster.promotion.port" | translate }}</mat-label>
            <input
              matInput
              [(ngModel)]="cluster.port"
              name="port"
              required
              pattern="^([0-9]{1,4}|[1-5][0-9]{4}|6[0-4][0-9]{3}|65[0-4][0-9]{2}|655[0-2][0-9]|6553[0-5])$"
            />
          </mat-form-field>
        </div>

        <div
          fxLayout="row"
          fxLayoutAlign="start center"
          fxFlex="1 0 auto"
          class="pl-4"
        >
          <label class="nv-modal-item-title margin-right-m">
            {{ 'multiCluster.fed_sync_registry' | translate }}
          </label>
            <mat-slide-toggle
              id="fed_sync_registry_toggle"
              [(ngModel)]="fed_sync_registry_toggle"
              [ngModelOptions]="{ standalone: true }"
            ></mat-slide-toggle>

            <mat-error></mat-error>
        </div>

        <div
          fxLayout="row"
          fxLayoutAlign="start center"
          fxFlex="1 0 auto"
          class="pl-4"
        >
          <label class="nv-modal-item-title margin-right-m">
            {{ 'multiCluster.fed_sync_repository' | translate }}
          </label>
          <mat-slide-toggle
            id="fed_sync_repo_toggle"
            [(ngModel)]="fed_sync_repo_toggle"
            [ngModelOptions]="{ standalone: true }"
          ></mat-slide-toggle>
          <mat-error></mat-error>
        </div>

        <div class="col-sm-10 col-sm-offset-1 mt-sm">
          <label class="radio-inline c-radio">
            <input
              id="https"
              type="radio"
              name="proxy"
              [(ngModel)]="useProxy"
              value="https"
            />
            {{'multiCluster.USE_HTTPS_PROXY' | translate}}
          </label>
        </div>
        <div class="col-sm-10 col-sm-offset-1 mt-sm">
          <label class="radio-inline c-radio">
            <input
              id="none"
              type="radio"
              name="proxy"
              [(ngModel)]="useProxy"
              value=""
            />
            {{'multiCluster.NO_PROXY' | translate}}
          </label>
        </div>

        <div
          style="width: calc(80vw - 48px); max-width: 952px;"
          class="pl-4 help-block"
        >
          {{ "multiCluster.promotion.hint" | translate }}
        </div>
      </form>
    </div>
    <div
      mat-dialog-actions
      class="dialog-actions pull-right"
      style="margin-right: 24px;"
    >
      <a class="modal-cancel-button" (click)="onCancel()">
        {{ "general.CANCEL" | translate }}
      </a>
      <button
        mat-button
        class="modal-submit-button"
        (click)="onConfirm()"
        type="submit"
        [disabled]="clusterForm.invalid"
      >
        {{ "general.SUBMIT" | translate }}
      </button>
    </div>
  </div>

